import { useEffect } from 'react';
import { useRecoilSnapshot } from 'recoil';

function DebugObserver() {
  const snapshot = useRecoilSnapshot();

  useEffect(() => {
    // 1.将css样式传递给数组
    const styles = ['color:green', 'background:yellow'].join(';');
    for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
      console.log('%c%s', styles, node.key + ' 状态更新↓');
      console.log(snapshot.getLoadable(node));
    }
  }, [snapshot]);

  return null;
}
export default DebugObserver;
